<template>
	<div style="padding-top:50px;">
		<TopWithBack></TopWithBack>
    <div class="index_divide"></div>
        <div class="orderdetails_t">
            <div class="orderdetails_t_l">
                订单编号：{{orderdetails.order_sn}}
            </div>
            <div class="orderdetails_r" v-if = "orderdetails.refound === 0">
                {{orderdetails.state_str}}
            </div>
            <div class="orderdetails_r" v-if = "orderdetails.refound === 11">
                {{orderdetails.refound_str}}
            </div>
            <div class="orderdetails_r" v-if = "orderdetails.refound === 21">
                {{orderdetails.refound_str}}
            </div>
            <div class="orderdetails_r" v-if = "orderdetails.refound === 12">
                已取消
            </div>
             <div class="orderdetails_r" v-if = "orderdetails.refound === 22">
                {{orderdetails.refound_str}}
            </div>

             <div class="orderdetails_r" v-if = "orderdetails.refound === 23">
               {{orderdetails.refound_str}}
            </div>
        </div>
        <div class="orderdetails_t">
            <div class="orderdetails_t_l">
                下单时间：{{orderdetails.createtime}}
            </div>
            <div class="orderdetails_r" style="color:#29bd5d">
                {{orderdetails.pay_str}}
            </div>
        </div>
        <div class="orderdetails_t1" @click="Openserviceproce(orderdetails.id)">
            <div class="orderdetails_t_l">
                订单服务流程
            </div>
            <div class="orderdetails_r1">
                <img src="@/assets/images/go.png" alt="" width="10%">
            </div>
        </div>
        <div class="index_divide"></div>
        <div class="orderdetails_t">
            <div class="orderdetails_t_l">
                预约洗护类型：{{orderdetails.yuyue_type}}
            </div>
        </div>
        <div class="orderdetails_t1">
            <div class="orderdetails_t_l">
                预约取货时间：{{orderdetails.take_time}}
            </div>
        </div>
        <div class="index_divide"></div>
        <div class="orderdetails_t1">
            <div class="orderdetails_t_l">
                {{orderdetails.linkman}}
            </div>
            <div class="orderdetails_r1">
                {{orderdetails.phone}}
            </div>
        </div>
        <div class="ordersdetails_adress">
            <div class="ordersdetails_adress_l">
                <img src="@/assets/images/addadres_icon.png" alt="" width="55%">
            </div>
            <div class="ordersdetails_adress_m">
                {{orderdetails.address}}
               <!--  河南省洛阳市西工区芳林大厦10楼
                } -->
            </div>
           <!--  <div class="ordersdetails_adress_r">
                <img src="@/assets/images/go.png" alt="" width="55%">
            </div> -->
        </div>
        <!--   <div class="orderdetails_t2">
                <div class="orderdetails_t1_box">
                     <div style="width:10%"><img src="@/assets/images/addadres_icon.png" alt="" width="50%"></div>
                     <div class="orderdetails_t_l">
                       河南省洛阳市西工区芳林大厦10楼
                      
                     </div>
                </div>   
                <div class="orderdetails_r2">
                     <img src="@/assets/images/go.png" alt="" width="60%">
                </div>
            </div> -->
        <div class="index_divide"></div>
          <div style="padding-bottom: 0px">    
            <div class="ordersdetails_con">
                <div class="ordersdetails_con_box_t">
                    订单明细
                </div>
                <div class="ordersdetails_con_box" v-for="(item,index) in order_item">
                    
                    <div class="ordersdetails_con_box_m">
                        <div class="ordersdetails_con_box_m_img" v-if="item.thumb==null||item.thumb==''">
                            <img src="@/assets/images/img_none.png">
                        </div>
                        <div class="ordersdetails_con_box_m_img" v-else>
                            <img :src=item.picurl alt="">
                        </div>
                        <div class="ordersdetails_con_box_m_r">
                            <div class="ordersdetails_con_box_m_r_t">
                                <div class="orderdetails_goodsname">{{item.name}}</div>
                                <div class="orderdetails_goodsprice">￥{{item.price}}</div>
                            </div>
                            
                            <div class="ordersdetails_con_box_m_r_b" v-if="item.color_name==null">
                                <span>颜色：未选</span><span>数量：{{goodnum}}个</span>
                            </div>
                            <div class="ordersdetails_con_box_m_r_b" v-else>
                                <span>颜色：{{item.color_name}}</span><span>数量：{{goodnum}}个</span>
                            </div>
                        </div>
                    </div>
                    <div class="ordersdetails_con_box_m_b">
                        {{item.remark}}
                    </div>
                    <!-- <div class="ordersdetails_con_box_m_b_b">订单金额：<span>￥{{item.price}}</span></div> -->
                </div>
            </div>
            <div class="ordersdetails_con_box_m_b_b" style="background: #fff;padding-right: 10px">订单总金额：<span>￥{{orderdetails.orderfee}}</span></div>
        </div> 
        <div class="index_divide"></div>
        <div class="ordersdetails_con" style="background: none" @click="openditu">
            <div class="ordersdetails_con_box">
                <div class="ordersdetails_con_box_t">
                    店铺：{{storedetail.name}}
                </div>
            </div>
        </div>
        <div class="ordersdetails_adress" style="background: none" @click="openditu">
            <div class="ordersdetails_adress_l">
                <img src="@/assets/images/addadres_icon.png" alt="" width="55%">
            </div>
            <div class="ordersdetails_adress_m">
                {{storedetail.address}}
            </div>
            <!-- <div class="ordersdetails_adress_r">
                    <img src="@/assets/images/go.png" alt="" width="55%">
                </div> -->
        </div>
        <div class="orderdetails_t1" style="line-height: 30px;background:none;margin-bottom: 50px" @click="callCustomer">
            <div class="orderdetails_t_l">
                店铺电话：{{storedetail.phone}}
            </div>
            <div class="orderdetails_r1">
                <img src="@/assets/images/tel_blue_icon.png" alt="" width="10%">
            </div>
        </div>
        <div class="orderdetails_bottom" v-if = "orderdetails.status>0 && orderdetails.status<7">
            <div class="delorder_btn" @click="canleOrders" v-if = "orderdetails.is_pay==0 && orderdetails.refound == 0 && orderdetails.status<4" style="width: 100%">取消订单</div>
            <div class="delorder_btn" @click="canleOrders" v-if = "orderdetails.is_pay==0 && orderdetails.status == 4">取消订单</div>
            <div class="payorder_btn" @click="Openpaytype(orderdetails.id)" v-if = "orderdetails.is_pay==0 && orderdetails.status == 4">立即付款</div>
            <div class="delorder_btn" v-if = "orderdetails.is_pay==1 && orderdetails.refound == 0 && (orderdetails.status==4||orderdetails.status==5)" @click="refound(orderdetails.id)" style="width: 100%;background: #ffa026">申请退单</div>
            <div class="payorder_btn" v-if = "orderdetails.is_pay==1 && orderdetails.refound == 0 && orderdetails.status==6" @click="ordercomplete" style="width: 100%">确认收货</div>
        </div>
        <div class="orderdetails_bottom" v-if = "is_show_comment==1">
             <div class="delorder_btn" @click="openEvelat" style="width: 100%;background: #ffa026">去评价</div>
        </div>

  </div>
</template>
<script>
import TopWithBack  from './../common/TopWithBack.vue'
import { orderDetalis, canlOrder, orderSuccess } from '@/api/allapis'
export default{
  name: 'GoodInfo',
  data(){
    return{
      id:"",//订单id
      orderdetails:'',//订单详情
      storedetail:'',//门店信息
      order_item:'',//订单商品列表
      order_log:'',//订单流程
      is_show_comment:'',//显示评价按钮
      goodnum:'1'//商品数量
    }
  },
  methods:{
    //拉取订单信息
    loadData(){
      orderDetalis(this.id).then(response=>{
        console.log(JSON.stringify(response))
        this.orderdetails = response.data.order_info
        this.storedetail = response.data.store_info
        this.order_item = response.data.order_item
        this.order_log = response.data.order_log
        this.is_show_comment = response.data.is_show_comment
      })
    },
    //取消订单
    canleOrders(){
        const self = this
        canlOrder(this.id).then(response=>{
          self.$vux.toast.show({
            text: response.msg,
            type: 'success',
            time: 800,
            onHide:function(){
              self.$router.replace({
                name:'Orders'
              })
            }
          })
        })
    },
    //打开支付页面
    Openpaytype(id){
      this.$router.push({
        path: `/paytype/${id}`
      })
    },
    //申请退款
    refound(){
      const self = this
      canlOrder(this.id).then(response=>{
        self.$vux.toast.show({
          text: response.msg,
          type: 'success',
          time: 800,
          onHide:function(){
            self.$router.replace({
              name:'Orders'
            })
          }
        })
      })
    },
    //确认订单完结
    ordercomplete(){
      const self = this
      orderSuccess(this.id).then(response=>{
        self.$vux.toast.show({
          text: response.msg,
          type: 'success',
          time: 800,
          onHide:function(){
            self.$router.replace({
              name:'Orders'
            })
          }
        })
      })
    },
    //打开服务流程
    Openserviceproce(id){
      this.$router.push({
        path: `/serviceproce/${id}`

      })
    },
    //打开地图导航
    openditu(){

    },
    //联系商家
    callCustomer(){

    },
  },
  created(){
    this.id = this.$route.params.id
    // console.log(this.id)
    this.loadData()
  },
  components:{
  	TopWithBack
  }
}
</script>
<style>

</style>



